import React, { Component } from "react";
// propTypes
import PropTypes from 'prop-types';
// url
import requestUrl from "@api/requestUrl";
// API
import { requestData } from "@api/common";
// antd
import { Select } from "antd";

const { Option } = Select;

class SelectComponent extends Component {
    constructor(props){
        super();
        console.log(props)
        this.state = {
            props: props.propsKey,
            options: [],
            style: props.style,
            // change value
            name: props.name,
            value: ''
        }
    }  

    componentDidMount(){
        this.getSelectList();
    }

    static getDerivedStateFromProps(nextProps, prevState){  // 1、静态的，无法获取 this.state，2、必须有返回
        let { value, name } = nextProps;
        console.log('getDerivedStateFromProps===>nextProps', nextProps, value, name)
        if(!value) { return false; }
        // 判断是否是JSON对象
        if(Object.prototype.toString.call(value) === "[object Object]") {
            value = value[name]   // { parentId: "760" }
        }
        if(value !== prevState.value) {
            return {
                value: value
            }
        }
        // 直接放在最后面
        return null;
    }


    // 请求数据
    getSelectList = () => {
        console.log(this.props)
        const url = this.props.url;
        const params = {
            page: 1,
            limit: 100
        }
        const requestParmas = {
            url: requestUrl[url],
            method: this.props.method,
            data: params
            // data: {}
        }
        // 不存在 url 时，阻止
        if(!requestParmas.url) { return false; }
        // 接口
        requestData(requestParmas).then(response => {
            this.setState({
                options: response.data.data.items,
                value: this.props.defaultValue  // 无用
            })
        })
    }
    // select onchang
    onChange = (value) => {
        console.log(value, typeof(value),!isNaN(value))        
        this.setState({ value })
        this.triggerChange(value);
    }
    triggerChange = (changedValue) => {
        const onChange = this.props.onChange;
        if (onChange) {
          onChange(changedValue);
        }
    };
    // 搜索
    onSearch = (val) => {
        console.log('search:', val);
    }

    render(){
        const { value, label } = this.state.props;
        console.log(this.props)
        return (
            <Select 
                mode={this.props.mode} 
                style={this.props.style} 
                value={this.state.value} 
                onChange={this.onChange}
                placeholder={this.props.placeholder}
                defaultValue={this.props.defaultValue}
                allowClear
                showSearch
                onSearch={this.onSearch}
                filterOption={(input, option) =>
                    option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
                filterSort={ this.props.filter_option === true ? (optionA, optionB) =>
                    optionA.children.toLowerCase().localeCompare(optionB.children.toLowerCase())
                    : ''
                }
                tokenSeparators={[',']}  // 自动分词
            >
                {
                    this.state.options && this.state.options.map(elem => {
                        // 兼容多字段拼接
                        return <Option value={elem[value]} key={Number(elem[value])}>
                                {
                                    Array.isArray(label) ? `${elem[label[0]]}-${elem[label[1]]}` : elem[label]
                                }
                               </Option>
                    })
                }
            </Select>
        )
    }
}

// 校验数据类型
SelectComponent.propTypes = {
    formConfig: PropTypes.object
}
// 默认
SelectComponent.defaultProps = {
    formConfig: {}
}
export default SelectComponent;